<template>
	<div id="app">
		<el-container style="height: 60%; border: 1px solid #eee">
			<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
				<el-menu :default-openeds="['1', '3']"  @select="handleSelect" background-color="#545c64"   text-color="#fff"
      active-text-color="#ffd04b">
					<el-submenu index="1">
						<template slot="title"><i class="el-icon-setting"></i>系统设置</template>
						<el-menu-item index="/userlist">系统账户</el-menu-item>
						<el-menu-item index="/rolelist">角色权限</el-menu-item>
					</el-submenu>

					<el-submenu index="2">
						<template slot="title"><i class="el-icon-setting"></i>商品秒杀</template>
						<el-menu-item index="/userlist">商品类别</el-menu-item>
						<el-menu-item index="/rolelist">商品信息</el-menu-item>
					</el-submenu>
					
				</el-menu>
			</el-aside>

			<el-container>
				<el-header style="text-align: right; font-size: 12px">
					<el-dropdown>
						<i class="el-icon-setting" style="margin-right: 15px"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>查看</el-dropdown-item>
							<el-dropdown-item>新增</el-dropdown-item>
							<el-dropdown-item>删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					<span>王小虎</span>
				</el-header>

				<el-main>

<!-- 					<el-breadcrumb separator="/">
						<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					</el-breadcrumb>
					<el-table :data="tableData">
						<el-table-column prop="date" label="日期" width="140">
						</el-table-column>
						<el-table-column prop="name" label="姓名" width="120">
						</el-table-column>
						<el-table-column prop="address" label="地址">
						</el-table-column>
					</el-table> -->
						<router-view />
				</el-main>
			</el-container>
		</el-container>



	
	</div>
</template>
<style scoped>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}
</style>

<script>
	export default {
		data() {
			const item = {
				date: '2016-05-02',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			};
			return {
				tableData: Array(20).fill(item)
			}
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
				this.$router.push(key);
			}
		}
	};
</script>
